<template>
  <div class="blog-home">

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <el-carousel :interval="5000" arrow="always" height="400px" class="banner">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.image" :alt="item.title" class="banner-image">
          <div class="banner-info">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div class="content-container">
        <!-- 左侧内容 -->
        <div class="left-content">
          <!-- 最新博客 -->
          <div class="section" v-loading="loading">
            <div class="section-header">
              <h2><i class="el-icon-notebook-2"></i> 最新博客 </h2>
              <router-link to="/index/latest" class="more-link">更多 >></router-link>
            </div>
            <div class="article-list">
              <div class="article-item" v-for="blog in blogList" :key="blog.blogId">
                <div class="article-cover">
                  <img :src="blog.cover" :alt="blog.title">
                </div>
                <div class="article-info">
                  <h3 class="article-title">
                    <a href="javascript:" @click="getBlogDetail(blog.blogId)">{{ blog.title }}</a>
                  </h3>
                  <p class="article-desc">{{ delTag(blog.content) }}</p>
                  <div class="article-meta">
                    <!-- 文章元信息: 作者,时间,分类,阅读量,评论数 -->
                    <span>
                <i class="el-icon-user"/>
                {{ blog.nickName }}
              </span>
                    <span>
                <i class="el-icon-time"/>
                {{ blog.createTime }}
              </span>
                    <span>
                <i class="el-icon-collection-tage"/>
                {{ blog.category }}
              </span>
                    <span>
                <i class="el-icon-view"/>
                {{ blog.views }}
              </span>
                    <span>
                <i class="el-icon-chat-dot-round"/>
                {{ blog.commentCount }}
              </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- 右侧内容 -->
        <div class="right-sidebar">
          <!-- 发布博客按钮 -->
          <div class="widget publish-widget">
            <el-button
              type="primary"
              icon="el-icon-edit"
              class="publish-btn"
              @click="addBlog"
            >发布博客</el-button>
          </div>

          <!-- AI 问答 -->
          <div class="widget ai-q-widget">
            <div class="widget-header">
              <h3><i class="el-icon-question"></i> 不懂就问</h3>
            </div>
            <div class="widget-content">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="输入你的问题，AI 即时回答"
                v-model="question"
                maxlength="200"
                show-word-limit
              />
              <el-button
                type="primary"
                size="small"
                style="width: 100%; margin-top: 10px"
                :loading="aiLoading"
                @click="askAI"
              >提问</el-button>
              <div v-if="answer" class="ai-answer">
                <el-divider />
                <div style="white-space: pre-wrap; font-size: 14px; color: #333">{{ answer }}</div>
              </div>
              
            </div>
          </div>

        </div>


      </div>

    </div>

    <!-- 博客详情组件 -->
    <BlogDetail ref="blogDetail"/>

    <!-- 新增或修改博客组件 -->
    <AddOrUpdateBlog ref="addOrUpdateBlog" @ok="getList"/>
  </div>
</template>

<script>
import {listBanner} from "@/api/huacai/banner";
import {listBlog} from "@/api/huacai/blog";
import BlogDetail from "@/views/components/blogDetail/index.vue";
import AddOrUpdateBlog from "@/views/components/AddOrUpdateBlog/index.vue";

export default {
  components: {AddOrUpdateBlog, BlogDetail},
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,

      },
      bannerList: [], //轮播图数据
      loading: false, //加载状态
      blogList: [], //博客列表数据
      question: '',
      answer: '',
      aiLoading: false

    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //查询轮播图数据
      listBanner(this.queryParams).then(res => {
        this.bannerList = res.rows
        this.bannerList.forEach(item => {
          item.image = process.env.VUE_APP_BASE_API + item.image
        })
      })
      //查询博客列表数据
      listBlog(this.queryParams).then(res => {
        this.blogList = res.rows
        this.blogList.forEach(item => {
          item.cover = process.env.VUE_APP_BASE_API + item.cover
        })
      })
    },
    //打开博客详情
    getBlogDetail(blogId) {
      this.$refs.blogDetail.handleOpen(blogId)
    },
    //移除html标签
    delTag(str) {
      return str.replace(/<[^>]+>/g, "")
    },
    //发布博客
    addBlog() {
      this.$refs.addOrUpdateBlog.handleAdd()
    },
    askAI() {
      if (!this.question.trim()) {
        this.$message.warning('请输入问题');
        return;
      }
      this.aiLoading = true;
      this.$axios.post('/api/ai/ask', { question: this.question })
        .then(res => {
          console.log('AI返回', res.data);
          this.answer = res.data.answer;
        })

        .catch(() => {
          this.answer = 'AI 走神了，稍后再试~';
        })
        .finally(() => {
          this.aiLoading = false;
        });

    }

  }
};
</script>

<style scoped>
.blog-home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.logo a {
  display: flex;
  flex-direction: column;
  color: #333;
  text-decoration: none;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.logo span {
  font-size: 12px;
  color: #666;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

/* 轮播图样式 */
.banner {
  margin-top: 20px;
  margin-bottom: 20px; /* 添加这行来创建下方间距 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
}

.banner-info h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

.banner-info p {
  margin: 0;
  font-size: 16px;
}

/* 内容容器 */
.content-container {
  display: flex;
  margin-bottom: 40px;
}

.left-content {
  flex: 1;
  margin-right: 20px;
}

.right-sidebar {
  width: 300px;
}

/* 区块样式 */
.section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
}

.section-header i {
  margin-right: 8px;
  color: #409eff;
}

.more-link {
  font-size: 14px;
  color: #999;
  text-decoration: none;
  transition: color 0.3s;
}

.more-link:hover {
  color: #409eff;
}

/* 文章列表样式 */
.article-list {
  padding: 0 20px;
}

.article-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px dashed #ebeef5;
}

.article-item:last-child {
  border-bottom: none;
}

.article-cover {
  width: 200px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.article-cover:hover img {
  transform: scale(1.05);
}

.article-info {
  flex: 1;
}

.article-title {
  margin: 0 0 10px;
  font-size: 18px;
}

.article-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.article-title a:hover {
  color: #409eff;
}

.article-desc {
  margin: 0 0 15px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  display: flex;
  font-size: 12px;
  color: #999;
}

.article-meta span {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.article-meta i {
  margin-right: 3px;
  font-size: 14px;
}

/* 发布按钮样式 */
.publish-widget {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 15px;
  text-align: center;
}

.publish-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.3);
  transition: all 0.3s;
}

.publish-btn:hover {
  background-color: #3779c5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 小工具样式 */
.widget {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

.widget-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.widget-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
}

.widget-header i {
  margin-right: 8px;
  color: #409eff;
}

.widget-content {
  padding: 15px 20px;
}

.ad-widget {
  text-align: center;
}

.ad-image {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: transform 0.3s;
}

.ad-image:hover {
  transform: scale(1.02);
}

.ad-desc {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  margin-bottom: 10px;
}

.widget ul li:last-child {
  margin-bottom: 0;
}

.widget ul li a {
  display: flex;
  justify-content: space-between;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.widget ul li a:hover {
  color: #409eff;
}

.widget .count {
  color: #999;
}

.link-column h4 {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 500;
}

.link-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-column li {
  margin-bottom: 10px;
}

.link-column a {
  color: #bbb;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.link-column a:hover {
  color: #fff;
}
</style>
